<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家审核管理</title>
    <!--引入的vue.js-->
    <script src="../../js/vue.js"></script>
    <!--引入elementUI的css-->
    <link type="text/css" rel="stylesheet" href="../../css/index.css">
    <!--引入elementUI的js-->
    <script src="../../js/index.js"></script>
    <!--引入axios.js-->
    <script src="../../js/axios.min.js"></script>
</head>
<body>
<!-- Vue应用根元素 -->
<div id="app" class="app1">
    <!-- 搜索区域 - 使用Element UI栅格系统布局 -->
    <el-row>
        <!-- 客户ID搜索框 -->
        <el-col :span="6">
            <el-input size="mini"
                      v-model="searchForm.customerId"
                      placeholder="请输入客户ID"
                      size="small">
            </el-input>
        </el-col>

        <!-- 客户名称搜索框 -->
        <el-col :span="6">
            <el-input size="mini"
                      v-model="searchForm.customerName"
                      placeholder="请输入商家名称"
                      size="small">
            </el-input>
        </el-col>

        <!-- 手机号搜索框 -->
        <el-col :span="6">
            <el-input size="mini"
                      v-model="searchForm.phone"
                      placeholder="请输入手机号"
                      size="small">
            </el-input>
        </el-col>
        <el-col :span="6">
            <el-select
                    v-model="searchForm.auditStatus"
                    placeholder="请选择审核状态"
                    size="small">
                <el-option label="全部" value=""></el-option>
                <el-option label="待审核" value="0"></el-option>
                <el-option label="已通过" value="1"></el-option>
                <el-option label="已拒绝" value="2"></el-option>
            </el-select>
        </el-col>

        <!-- 搜索按钮 -->
        <el-col :span="6">
            <el-button size="mini"
                       type="primary"
                       icon="el-icon-search"
                       @click="search"
                       size="small">
                搜索
            </el-button>
        </el-col>
    </el-row>

    <!-- 客户数据表格 -->
    <el-table :data="tableData" style="width: 100%">
        <!-- 客户ID列 -->
        <el-table-column prop="customerId" label="商家ID" width="80"></el-table-column>

        <!-- 客户名称列 -->
        <el-table-column prop="customerName" label="商家名称" width="120"></el-table-column>

        <!-- 客户身份证件列 -->
        <el-table-column prop="idCard" label="身份证号" width="120"></el-table-column>

        <!-- 手机号列 -->
        <el-table-column prop="phone" label="手机号" width="120"></el-table-column>

        <!-- 地址列 -->
        <el-table-column prop="address" label="地址" width="150"></el-table-column>

        <!-- 预付款余额列 -->
        <el-table-column prop="income" label="预付款余额" width="120"></el-table-column>

        <!-- 状态列 -->
        <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                    {{ scope.row.status === '0' ? '正常' : '停用' }}
                </el-tag>
            </template>
        </el-table-column>

        <!-- 审核状态列 -->
        <el-table-column prop="auditStatus" label="审核状态" width="100">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.auditStatus === '0'" type="info">待审核</el-tag>
                <el-tag v-else-if="scope.row.auditStatus === '1'" type="success">通过</el-tag>
                <el-tag v-else type="danger">拒绝</el-tag>
            </template>
        </el-table-column>
        <!-- 审核人列 -->
        <el-table-column prop="auditBy" label="审核人" width="120">
            <template slot-scope="scope">
                {{ scope.row.auditBy || '未审核' }} <!-- 未审核时显示“未审核” -->
            </template>
        </el-table-column>

        <!-- 审核时间列 -->
        <el-table-column prop="auditTime" label="审核时间" width="180">
            <template slot-scope="scope">
                <!-- 时间格式处理：将ISO格式（含T）转为正常时间字符串 -->
                {{ scope.row.auditTime ? scope.row.auditTime.replace('T', ' ').substring(0, 19) : '未审核' }}
            </template>
        </el-table-column>
        <!-- 创建时间列 -->
        <el-table-column prop="createTime" label="创建时间" width="180">
            <template slot-scope="scope">
                {{ scope.row.createTime ? scope.row.createTime.replace('T', ' ').substring(0, 19) : '' }}
            </template>
        </el-table-column>

        <!-- 在创建时间列后添加身份证照片列 -->
        <el-table-column label="身份证照片" width="120">
            <template slot-scope="scope">
                <div v-if="scope.row.idPhotograph">
                    <el-image
                            :src="scope.row.idPhotograph"
                            :preview-src-list="[scope.row.idPhotograph]"
                            style="width: 80px; height: 80px;"
                            fit="cover"
                            lazy>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <div v-else>
                    <span>无</span>
                </div>
            </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" fixed="right" width="200">
            <template slot-scope="scope">
                <!-- 查看按钮 -->
                <el-button size="mini" @click="handleView(scope.$index, scope.row)">
                    查看
                </el-button>
                <!-- 审核按钮 -->
                <el-button size="mini" type="warning" @click="handleAudit(scope.$index, scope.row)">
                    审核
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3,5,10,15,20,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!-- 查看商家对话框 只读 -->
    <el-dialog :title="title" :visible.sync="viewDialogVisible" width="600px">
        <!-- 表单 -->
        <el-form :model="form" ref="form" label-width="100px" class="readonly-form">
            <!-- 客户名称输入框 -->
            <el-form-item label="商家名称" prop="customerName">
                <el-input v-model="form.customerName" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 手机号输入框 -->
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 身份证号输入框 -->
            <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="form.idCard" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 地址输入框 -->
            <el-form-item label="地址" prop="address">
                <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 预付款余额输入框 -->
            <el-form-item label="预付款余额" prop="income">
                <el-input v-model="form.income" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 身份证照片路径输入框 -->
            <el-form-item label="身份证照片" prop="idPhotograph">
                <el-input v-model="form.idPhotograph" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 关联用户ID输入框 -->
            <el-form-item label="关联用户ID" prop="userId">
                <el-input v-model="form.userId" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 状态选择框 -->
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio label="0">正常</el-radio>
                    <el-radio label="1">停用</el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- 身份证照片显示 -->
            <el-form-item label="身份证照片" prop="idPhotograph">
                <div v-if="form.idPhotograph">
                    <img :src="form.idPhotograph" style="width: 100px; height: 100px; margin-top: 10px;" />
                </div>
                <div v-else>
                    <span>无照片</span>
                </div>
            </el-form-item>
            <!-- 备注输入框 -->
            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="form.remark" autocomplete="off" :rows="3"></el-input>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 客户审核对话框 -->
    <el-dialog title="客户审核" :visible.sync="auditDialogVisible" width="500px">
        <el-form :model="auditForm" ref="auditForm" label-width="80px">
            <el-form-item label="客户名称">
                <el-input v-model="auditForm.customerName" readonly></el-input>
            </el-form-item>
            <el-form-item label="审核状态">
                <el-select v-model="auditForm.auditStatus" placeholder="请选择审核状态" style="width: 100%">
                    <el-option label="通过" value="1"></el-option>
                    <el-option label="拒绝" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审核备注">
                <el-input type="textarea" v-model="auditForm.auditRemark" :rows="3"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="auditDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAuditForm('auditForm')">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],              // 表格数据
                currentPage: 1,             // 当前页码
                pageSize: 5,                // 每页显示条数
                total: 0,                   // 总条数
                searchForm: {               // 搜索条件
                    customerId: '',
                    customerName: '',
                    phone: '',
                    auditStatus: '' // 新增：审核状态筛选（0=待审核，1=通过，2=拒绝）
                },
                idPhotoFileList: [],// 身份证照片上传文件列表
                title: '查看商家信息',           // 对话框标题
                auditDialogVisible: false,  // 审核对话框是否可见
                viewDialogVisible: false,   // 查看对话框是否可见
                form: {                     // 客户表单数据
                    customerId: '',
                    customerName: '',
                    idCard: '',
                    phone: '',
                    address: '',
                    income: '',
                    status: '0',
                    idPhotograph: '',
                    userId: '',
                    remark: ''
                },
                auditForm: {                // 审核表单数据
                    customerId: '',
                    customerName: '',
                    auditStatus: '',
                    auditRemark: ''
                },
            }
        },
        created() {
            // 页面加载时加载数据
            this.loadData();
        },
        methods: {
            // 加载客户数据
            loadData() {
                let _this = this;
                // 发送POST请求获取分页数据
                axios.post('/vegetablemarketexpress/customer/selectCustomerList', {
                    "pageNo": this.currentPage,
                    "pageSize": this.pageSize,
                    "data": this.searchForm
                }).then(function(response) {
                    if (response.data.code == 200) {
                        _this.tableData = response.data.data.list;
                        _this.total = response.data.data.total;
                    }
                }).catch(function(error) {
                    console.log(error);
                    _this.$message.error('数据加载失败');
                });
            },

            // 每页条数改变时触发
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.loadData();
            },

            // 当前页改变时触发
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },

            // 搜索功能
            search() {
                this.currentPage = 1;
                this.loadData();
            },
            // 处理查看商家
            handleView(index, row) {
                this.viewDialogVisible = true;
                this.title = "查看客户信息";
                // 深拷贝避免直接引用
                this.form = JSON.parse(JSON.stringify(row));
            },
            // 处理客户审核：打开审核弹窗时自动填充审核人
            handleAudit(index, row) {
                this.auditDialogVisible = true;
                // 仅初始化客户ID、客户名称，审核人由后端自动获取
                this.auditForm = {
                    customerId: row.customerId,// 商家ID（必传）
                    customerName: row.customerName,// 商家名称（仅展示用，非必传）
                    auditStatus: '',// 前端选择的审核结果（1通过/2拒绝）
                    auditRemark: '',// 前端输入的审核备注
                };
            },
            // 提交审核表单
            submitAuditForm(formName) {
                let _this = this;
                // 确保审核人字段不缺失
                // 1. 验证审核状态是否选择
                if (!this.auditForm.auditStatus) {
                    this.$message.error('请选择审核状态（通过/拒绝）');
                    return;
                }
                let submitForm = {
                    customerId: this.auditForm.customerId,// 客户ID
                    auditStatus: this.auditForm.auditStatus,// 审核结果（1/2）
                    auditRemark: this.auditForm.auditRemark,// 审核备注
                };
                // 发送审核请求
                axios.post('/vegetablemarketexpress/customer/auditCustomer', submitForm)
                    .then(function(response) {
                        if (response.data.code == 200) {
                            _this.$message({
                                message: '审核成功',
                                type: 'success'
                            });
                            _this.loadData();// 重新加载客户列表
                            _this.auditDialogVisible = false;
                        } else {
                            _this.$message.error('审核失败: ' + response.data.msg);
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                        _this.$message.error('审核异常');
                    });
            },

/*            // 处理客户审核
            handleAudit(index, row) {
                this.auditDialogVisible = true;
                this.auditForm.customerId = row.customerId;
                this.auditForm.customerName = row.customerName;
                this.auditForm.auditStatus = '';
                this.auditForm.auditRemark = '';
            }*/
        }
    });
</script>
</body>
</html>
